<template>
  <div class="Blog-Category-Container" v-loading="isLoading">
    <h2>文章分类</h2>
    <Catelog :list="list" @select="handleSelect"/>
  </div>
</template>

<script>
import Catelog from "./Catalog.vue";
import fetchData from "@/mixins/fetchData.js";
import { getBlogsTypes } from "@/api/blog.js";
export default {
  mixins: [fetchData([])],
  components: {
    Catelog,
  },
  computed: {
     getRouterInfo() {
      const categoryId = +this.$route.params.categoryId || -1;
      const page = +this.$route.query.page || 1;
      const limit = +this.$route.query.limit || 10;
      return {
        categoryId,
        page,
        limit,
      };
    },
    list() {
      const totalArticleCount = this.data.reduce((a, b) => {
        return a + b.articleCount;
      }, 0);
      const result = [{name:'全部',id:-1,articleCount:totalArticleCount},...this.data];
      return result.map((item)=>(
        {
          ...item,
          active:item.id===this.getRouterInfo.categoryId,
          aside:`${item.articleCount}篇`,
        }
      ))
    },
  },
  methods: {
    async fetchData() {
      return await getBlogsTypes();
    },
    
    handleSelect(item){
      const query = {
            page:1,
            limit:this.getRouterInfo.limit,
        };
        //判断当前path有没有分类
        if(item.id === -1){
            //没有分类
            this.$router.push({name:"Blog",
            query,
            })
        }
        else{
          //有分类
            this.$router.push({
                name:"Category",
                query,
                params:{
                    categoryId:item.id,
                },
            })
        }
    }
  },
};
</script>

<style scoped lang="less">
.Blog-Category-Container {
  width: 300px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  height: 100%;
  overflow-y: auto;
  h2 {
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 1em;
    margin: 0;
  }
}
</style>